<template>
  <views class="account_list">
    <!-- 新增/修改 -->
    <el-dialog
      :title="type==1?'新增人员':'修改人员'"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="dialog_content">
        <el-form ref="form" label-width="auto">
          <el-form-item label="用户名:">
            <el-input type="text" clearable placeholder="请输入人员姓名" v-model="form.person_name" :disabled="type==1?false:true"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-select v-model="form.sex" clearable placeholder="请选择">
              <el-option
                      v-for="item in sex_list"
                      :key="item.id"
                      :label="item.va"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话:">
            <el-input type="text" clearable placeholder="请输入联系电话" v-model="form.connect_mobile"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码:">
            <el-input type="text" clearable placeholder="请输入身份证号码" v-model="form.card_no"></el-input>
          </el-form-item>
          <el-form-item label="职业:">
            <el-input type="text" clearable placeholder="请输入职业" v-model="form.profession"></el-input>
          </el-form-item>

          <el-form-item label="关注等级:">
            <el-select v-model="form.judge_level" clearable placeholder="请选择">
              <el-option
                v-for="item in judge_level_list"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>

    <viewTitle :title="'高危人员列表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="用户姓名:">
          <el-input type="text" clearable placeholder="请输入用户姓名" v-model="person_name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码:">
            <el-input type="text" clearable placeholder="请输入身份证号码" v-model="card_no"></el-input>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input type="text" clearable placeholder="请输入手机号码" v-model="connect_mobile"></el-input>
        </el-form-item>
        <el-form-item label="关注等级:">
          <el-select v-model="judge_level" clearable placeholder="请选择">
            <el-option
                    v-for="item in judge_level_list"
                    :key="item"
                    :label="item"
                    :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn-area">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="warning"  v-if="$route.query.check.i" @click="add">新增</el-button>
        <el-button type="info" icon="el-icon-download" @click="downloadExcel">下载模板</el-button>
        <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :before-upload="beforeExcelUpload"
                :auto-upload = "true"
                accept=".xls, .xlsx"
                :http-request="uploadExcel"
                :limit="1"
                :file-list="fileList"
                :multiple="false">
          <el-button type="success" title="只能上传xls/xlsx文件，且不超过2m">批量导入</el-button>
        </el-upload>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableList" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="person_name" label="姓名" width="150"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.sex==0?'保密':(row.sex==1?'男':'女')}" label="性别" width="150"></el-table-column>
        <el-table-column prop="connect_mobile" label="联系电话" width="150"></el-table-column>
        <el-table-column prop="card_no" label="身份证号码" width="150"></el-table-column>
        <el-table-column prop="profession" label="职业" width="150"></el-table-column>
        <el-table-column  label="关注等级" width="200">
          <template slot-scope="rate">
              <el-rate
                      v-model="rate.row.judge_level"  disabled   show-score
                      :colors="returnColors">
              </el-rate>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="edit(scope.row)"  v-if="$route.query.check.m" icon="el-icon-edit">修改</el-button>
            <el-button v-if="$route.query.check.d" type="danger"  @click="deleted(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flexR paging">
        <el-pagination
          style="background:#fff; padding:10px 0"
          background
          layout="prev, pager, next,sizes,total, jumper"
          @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
          @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.page_size"
          :total="pagination.total_count"
          :current-page="pagination.current_page"
          :page-count="pagination.page_count"
        ></el-pagination>
      </div>
    </div>
  </views>
</template>


<script>
import route_list from "../../router/route_list";

export default {
  data() {
    return {
      form:{
          person_name: "admin", // 用户名
          connect_mobile: "admin", // 用户名
          card_no: "123456", // 密码
          sex: 0, // 真实姓名
          profession: 0, // 职业
          judge_level:0
      },
      person_name:"",
      connect_mobile: "", // 组织
      card_no:"",
      judge_level: "", // 角色
      judge_level_list: [1,2,3,4,5], // 角色列表
      sex_list: [{id:0,va:"保密"},{id:1,va:"男"},{id:2,va:"女"}], // 角色列表
      tableList: [],
      pagination: {
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      fileList: [],
      type: 1, // 1 新增 2 修改
      dialogVisible: false // 弹框展示
    };
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 获取数据
    getData() {
         this.$raxios.post(
            this.$mapapi.admin_listPerson,
            {data: this.query_data}   
        ).then(res=>{
          if(res.code==200){
            this.tableList = res.data.list || [];
            this.pagination = res.data.pagination || [];
          }else{
            this.tableList =  [];
            this.pagination = [];
	          this.$message.error(res.msg)
          }
        }).catch(res=>{

        })
    },
    // 去详情
    toDetail() {
      this.$toRoutePath({
        path: "/member_list/member_list_detail",
        edit: true,
        query: { type: 1 }
      });
    },
    // 重置
    reset() {
        this.person_name = ''
        this.card_no = ''
        this.sex = ''
        this.connect_mobile = ''
        this.judge_level = ''
      this.getData();
    },
    // 新增
    add() {
      this.form = {};
      this.type = 1;
      this.dialogVisible = true;
    },
    // 修改
    edit(row) {
      this.form = row;
      this.type = 2;
      this.dialogVisible = true;
    },
    // 删除
    deleted(row) {
      this.$confirm("此操作将删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let post_data={
            judge_person_id:row.judge_person_id
          }
            this.$raxios.post(
                this.$mapapi.admin_delPerson,{data:post_data}
            ).then(res=>{
              if(res.code==200){
                 this.$message({type: "success", message: "删除成功!"});
                 this.getData()
              }else{
                  this.regionList = [];
	              this.$message.error(res.msg)
                return;
              }
            }).catch(res=>{

            })
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false;
    },
    saveUser(){
       this.$raxios.post(
            this.$mapapi.admin_entryPerson,{data:this.save_data}
        ).then(res=>{
          if(res.code==200){
            this.dialogVisible = false
            this.$message({type: "success", message: "保存成功!"});
            this.getData()
          }else{
            this.regionList = [];
	          this.$message.error(res.msg)
            return;
          }
        }).catch(res=>{

        })     
    },
      //上传相关
      beforeExcelUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          this.fileList.push(file)
      },
      uploadExcel(){
        console.log('fileList', this.fileList);
          let list = this.fileList || [];
          if (list.length == 0) {
              this.$message({
                  message: "你选择上传的文件",
                  type: "warning"
              });
              return;
          }
          var formData = new FormData();
          formData.append("token", this.$store.state.token);
          formData.append("operator", 'person');
          formData.append("file", this.fileList[0]);
          this.$api.upload('/admin/uploadExcel',formData).then(response=>{
              //console.log("上传成功返回",response)
              if(response.code != 200){
                  this.$message.error(response.msg);
              }else{
                  this.$message.success(response.msg);
	              this.getData();
              }

          })
      },
      downloadExcel(){
          let a = document.createElement('a')
          a.href = this.$config.serverURL + 'template/person.xlsx';
          a.click()
      }
  },
  computed:{
      query_data(){
          let data = {}
          data.person_name = this.person_name
          data.connect_mobile = this.connect_mobile
          data.card_no = this.card_no
          data.judge_level = this.judge_level
          data.pagination = this.pagination;

          return data
      },
      save_data(){
          let data = this.form;
          return data
      },
      returnColors(){
          return ['#F7BA2A', '#F7BA2A', '#FF9900']
      }
  },
  mounted() {
      this.getData()
  },
  created() {
  }
};
</script>





<style lang="less" :scope="true"  src="@/style/system_manager/account_list.less">
</style>
